<template>
  <div class="login-container container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="注册/登录"
      class="page-nav-bar"
    >
    <van-icon slot="left" name="cross" @click="$router.back()"></van-icon>
    </van-nav-bar>
    <!-- 登录表单 -->
    <van-form @submit="onSubmit" ref="loginFormRef">
  <van-field
    name="mobile"
    v-model="user.mobile"
    placeholder="请输入手机号"
    :rules="userFormRules.mobile"
    maxlength="11"
  >
  <i slot="left-icon" class="toutiao toutiao-shouji"></i>
  </van-field>
  <van-field
  v-model="user.code"
    name="code"
    placeholder="请输入验证码"
    :rules="userFormRules.code"
    maxlength="6"
  >
   <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
     <template #button>
      <van-count-down :time="1000 * 30" format="ss s" v-if="isCountDownShow" @finish="hiddenDownShow"/>
    <van-button v-else round size="mini" type="default" class="btn-yanzheng" native-type="button" @click="onsendSms">
      获取验证码
    </van-button>
  </template>
  </van-field>
  <div class="login-btn-box">
    <van-button class="login-btn invalid"  block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { login, getSms } from '@/api/user.js'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      user: {
        mobile: '13911111111',
        code: '246810'
      },
      userFormRules: {
        mobile: [
          { required: true, message: '请输入手机号' },
          { pattern: /1[3|5|7|8]\d{9}/, message: '请输入正确的手机号' }
        ],
        code: [
          { required: true, message: '请输入验证码' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码' }
        ]
      },
      // 控制倒计时显示隐藏
      isCountDownShow: false
    }
  },
  methods: {
    ...mapMutations('user', ['setUser']),
    async onSubmit () {
      // 表单验证

      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data } = await login(this.user)
        this.$toast.success('登录成功')
        this.setUser(data.data)
        this.$router.back()
      } catch (error) {
        if (error.response.status === 400) {
          this.$toast.fail('登录失败')
        } else {
          this.$toast.fail('手机号或验证码错误')
        }
      }
    },
    // 点击获取验证码
    async onsendSms () {
      // 验证手机号
      try {
        const results = await this.$refs.loginFormRef.validate('mobile')
        console.log('成功', results)
      } catch (error) {
        return console.log('失败', error)
      }
      this.isCountDownShow = true
      // 获取验证码
      try {
        await getSms(this.user.mobile)
        console.log('成功')
      } catch (error) {
        // 发送失败，停止倒计时
        if (error.response.status === 429) {
          this.$toast('操作过于频繁，请稍后再试')
        } else {
          this.isCountDownShow = false
          this.$toast('发送失败，请重试')
        }
      }
    },
    // 倒计时结束的回调
    hiddenDownShow () {
      this.isCountDownShow = false
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .btn-yanzheng {
    background-color: #ededed;
    width: 152px;
    height: 46px;
    line-height: 46px;
      font-size: 22px;
      color: #666;
  }
  .login-btn-box {
    margin: 53px 33px;
    .login-btn {
      border: none;
    }
    .valid {
      background-color: #6db4fb;
    }
    .invalid {
      background-color: #6db4fb;
    }
  }
}
</style>
